<template>
  <div class="permission">
    <!-- 卡片容器 -->
    <el-card>
      <!-- 添加菜单的按钮 -->
      <div class="btn">
        <!-- 点击此处的新增按钮是新增一级权限 -->
        <el-button
          type="primary"
          size="mini"
          @click="openAdd(1, '0')"
        ><i class="el-icon-edit" />添加菜单</el-button>
      </div>
      <!-- 权限管理的表格 -->
      <el-table :data="list" border row-key="id">
        <el-table-column label="菜单名称" prop="name" />
        <el-table-column label="权限标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 点击此处的新增按钮是新增二级权限 -->
            <el-button
              type="text"
              v-if="scope.row.type === 1"
              @click="openAdd(2, scope.row.id)"
            >添加权限点</el-button>
            <el-button type="text">查看 api 权限</el-button>
            <el-button type="text" @click="openEdit(scope.row)">查看</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑面板 -->
    <panel ref="mypanel" :panel-show.sync="panelShow" @updateData="getAllPer" />
  </div>
</template>

<script>
import panel from './components/panel.vue'
import { getAllPerAPI, delPerAPI } from '@/api/permission'
export default {
  components: {
    panel
  },
  data() {
    return {
      // 表格的数据源
      list: [],
      // 控制面板的显示与隐藏
      panelShow: false
    }
  },
  created() {
    // 得到权限点
    this.getAllPer()
  },
  methods: {
    // 点击时打开新增面板
    openAdd(type, pid) {
      this.panelShow = true
      // 将type和pid传入到子组件中
      this.$refs.mypanel.saveParams(type, pid)
    },
    // 点击打开编辑面板
    openEdit(row) {
      this.panelShow = true
      // 获取当前操作的编辑数据,使用ref调用子组件的方法
      this.$refs.mypanel.getPer(row.id)
    },
    // 点击删除
    del(row) {
      // 询问用户是否确定删除
      this.$confirm('您确定要删除当前数据吗')
        .then(async() => {
          // 调用接口删除数据
          await delPerAPI(row.id)
          // 删除成功提示
          this.$message.success('您已成功删除该数据')
          // 刷新页面
          this.getAllPer()
        })
        .catch(() => {
          console.log('取消')
        })
    },
    // 得到所有的权限点
    async getAllPer() {
      const res = await getAllPerAPI()
      // 保存权限点数据
      this.list = this.trueData(res.data, '0')
    },
    // 将并列结构转换为树状结构
    trueData(arr, pid) {
      const res = []
      arr.forEach((item) => {
        if (item.pid === pid) {
          const children = this.trueData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    }
  }
}
</script>

<style lang="scss">
.permission {
  margin: 20px;
  .btn {
    text-align: right;
  }
}
</style>
